<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart id="rightTop" :options="option" class="right_top_inner" ref="charts" />
</template>

<script>
import { get } from "api";
export default {
  data() {
    return {
      option: {}
    };
  },
  props: {
    infoData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    infoData: {
      handler(newData) {
        this.init(newData); // 重新渲染图表
      },
      deep: true
    }
  },
  created() {},

  mounted() {
    this.getData();
  },
  beforeDestroy() {},
  methods: {
    getData() {
      // this.pageflag = true;
      // get("/admin/userCount").then(res => {
      //   if (res.code == 200) {
          this.init(this.infoData);
      //   } else {
      //     this.pageflag = false;
      //     this.$Message({
      //       text: res.msg,
      //       type: "warning"
      //     });
      //   }
      // });
    },
    init(data) {
      var colorList = ["#008CFF", "#42FF8E", "#E7B56E", "#ff7777"];
      var colorList1 = [
        "rgba(0, 140, 255, .4)",
        "rgba(66, 255, 142, .4)",
        "rgba(231, 181, 110, .4)",
        "rgba(255, 119, 119, .4)",
      ];
      let imgUrl = require("../../assets/img/peopel.png");
      // let pieData = [
      //   {
      //     name: "巡检人员",
      //     value: data ? data.people : 0
      //   },
      //   {
      //     name: "广告牌商家",
      //     value: data ? data.shop : 0
      //   },
      //   {
      //     name: "第三方检测机构",
      //     value: data ? data.checkpeople : 0
      //   }
      // ];
      let pieData = data
      this.option = {
        graphic: [
          {
            type: "image",
            style: {
              image: imgUrl,
              width: "100",
              height: "100"
            },
            left: "25%",
            top: "center"
          }
        ],
        selectedMode: false,
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          bottom: "center",
          right: 0,
          textStyle: {
            color: "#96F5F6",
            fontSize: 16
          }
        },
        series: [
          {
            type: "pie",
            cursor: "default",
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                }
              }
            },
            radius: ["78%", "40%"],
            center: ["35%", "50%"],
            avoidLabelOverlap: false,
            legendHoverLink: true,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: pieData
          },
          {
            radius: ["85%", "78%"],
            // radius: ["78%", "40%"],
            center: ["35%", "50%"],
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList1[params.dataIndex];
                }
              }
            },
            type: "pie",
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            avoidLabelOverlap: false,
            legendHoverLink: true,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: pieData
          }
        ]
      };
    }
  }
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>